<template>
  <header class="main-header" style="background-color: #f5f5f5; padding: 2px">
    <a-page-header
        style="border: 2px solid rgb(235, 237, 240)"
        title="医数通健康管理平台"
        :ghost="true"
        :avatar="{
        src: 'https://s2.loli.net/2024/10/12/5rXEZGoHny9wIvC.jpg',
        shape: 'square',
        size: 'large',
      }"
    >
      <template #extra>
        <a-dropdown-button @click="handleButtonClick">
          <!--todo 这里绑定登录用户-->
          当前用户是：{{ account.uname }}
          <template #overlay>
            <a-menu @click="handleMenuClick">
              <a-menu-item key="1">
                退出登录
              </a-menu-item>
            </a-menu>
          </template>
        </a-dropdown-button>
      </template>
    </a-page-header>
  </header>
  <div class="container">
    <a-watermark content="冯立成组">
      <a-layout class="body">
        <a-layout-sider
            breakpoint="lg"
            :style="{ backgroundColor: 'rgb(87,202,197)' }"
            collapsed-width="0"
            @collapse="onCollapse"
            @breakpoint="onBreakpoint"
        >
          <a-menu
              v-model:selectedKeys="state.selectedKeys"
              :style="{ backgroundColor: 'rgb(87,202,197)' }"
              mode="inline"
              :items="items"
              @click="onClickItem"
          ></a-menu>
        </a-layout-sider>
        <a-layout>
          <a-layout-content :style="{ margin: '24px 16px 0' }">
            <div
                :style="{
                padding: '24px',
                background: '#fff',
                minHeight: '650px',
              }"
            >
              <!--todo 路由嵌套-->
              <router-view></router-view>
            </div>
          </a-layout-content>
          <a-layout-footer style="text-align: center">
            ujn 医数通健康管理系统
          </a-layout-footer>
        </a-layout>
      </a-layout>
    </a-watermark>
  </div>
</template>
<script setup>
import {onMounted, reactive, ref} from "vue";
import router from "../router/index.js";
import {getCurrentAccount} from "../services/account.js";
import myAxios from "../plugins/myAxios.js";

const account = ref({
  uname: "未登录"
})


onMounted(async () => {
  account.value.uname = "未登录"
  account.value = await getCurrentAccount()
  // await router.push('/index/doctor')
  console.log(account.value.uname)
});

function getItem(label, key, children, type) {
  return {
    key,
    children,
    label,
    type,
  };
}

const items = reactive([
  //   todo 新增页面需要改这里
  getItem("医师模块", "doctor"),
  getItem("医药公司模块", "drugCompany"),
  getItem("医药公司政策模块", "companyPolicy"),
  getItem("城市信息模块", "city"),
  getItem("医保政策模块", "medicalPolicy"),
  getItem("药品信息模块", "drug"),
  getItem("必备材料模块", "material"),
]);
// 只有一个菜单展开
const state = reactive({
  selectedKeys: ["doctor"],
});
const onClickItem = (res) => {
  //todo 这里处理点击后vue-rooter跳转
  router.push({path: `/index/${res.key}`});
  console.log(res.key);
};
//响应式布局
const onCollapse = (collapsed, type) => {
  console.log(collapsed, type);
};
const onBreakpoint = (broken) => {
  console.log(broken);
};

const handleButtonClick = async () => {

};
const handleMenuClick = async () => {
  const res = await myAxios({
    method: "post",
    url: "/account/logout",
  })
  // console.log(res.data,"click")
  router.push('/login')
};
</script>
<style scoped>
#components-layout-demo-responsive .logo {
  height: 32px;
  margin: 16px;
}

.site-layout-sub-header-background {
  background: #fff;
}

.site-layout-background {
  background: #fff;
}

[data-theme="dark"] .site-layout-sub-header-background {
  background: #141414;
}
</style>
